<template>
    <div class='login-container'>
        <div class='login-bg'></div>
        <div class='right-opera'>
            <p class='title'>绑定账号</p>
            <a-form-model ref="loginForm" class='login-form' :model="form" :rules="rules">
                <a-form-model-item prop="account">
                    <a-input v-model='form.account' placeholder="请输入手机号">
                        <img src='~/assets/images/login-tel.png' slot="prefix" alt='' class="prefix-image">
                    </a-input>
                </a-form-model-item>
                <a-form-model-item prop="verificationCode" class='send-verificationCode'>
                    <a-input v-model='form.verificationCode' @keyup.enter.native='onSubmit' class='verificationCode-input' placeholder='请输入验证码'>
                        <img src='~/assets/images/login-email.png' slot="prefix" alt='' class="prefix-image2">
                    </a-input>
                    <a-button type="link" class='btn' :disabled='!!second' @click="getCode">获取验证码{{ second ? '&emsp;' + second : '' }}</a-button>
                </a-form-model-item>
                <a-form-model-item class='login-btn-item'>
                    <a-button type="primary" class='login-btn' @click="onSubmit" :loading='loading'>提交</a-button>
                </a-form-model-item>
                <p class='hasAccount'>已有账号？<a-button type='link' @click='toLogin'>马上登录</a-button></p>
            </a-form-model>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BindAccount',
    layout: 'login-layout',
    data () {
        const checkTel = (rule, value, callback) => {
            if (!(/^1[3456789]\d{9}$/.test(value))) {
                callback(new Error('请输入正确的联系电话'))
            } else {
                callback()
            }
        }
        return {
            form: {
                account: '',
                verificationCode: ''
            },
            rules: {
                account: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkTel, trigger: 'change' }
                ],
                verificationCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            checkPrivacy: true,
            second: 0,
            timer: null,
            loading: false
        }
    },
    methods: {
        onSubmit () {
            this.$refs.loginForm.validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    const res = await this.$ApiServer['login/wechat']({
                        smscode: this.form.verificationCode,
                        type: 2,
                        wxcode: this.$route.query.code,
                        wxstate: this.$route.query.state
                    })
                    this.loading = false
                    if (res.code === 200) {
                        this.$store.dispatch('user/setUserInfo', res.data).then(() => {
                            this.$message.success(res.message)
                            if (res.data.orgCategoryId === '4' && (res.data.companyId === '0' || !res.data.companyId) && !res.data.companyInfoState) {
                                this.$router.push('/welcome')
                            } else if (res.data.companyInfoState && !res.data.companyState) {
                                this.$router.push('/company-auth')
                            } else if (!res.data.companyInfoState && res.data.companyState) {
                                this.$router.push('/settled')
                            } else if (res.data.companyInfoState && res.data.companyState) {
                                this.$router.push('/home')
                            } else if (!res.data.companyInfoState && !res.data.companyState) {
                                this.$router.push('/company-examine')
                            } else if (res.data.orgCategoryId === '3' || res.data.orgCategoryId === '2') {
                                this.$router.push('/home')
                            } else if (res.data.orgCategoryId === '5' || res.data.orgCategoryId === '6') {
                                this.$router.push('/home')
                            } else {
                                this.$router.push('/home')
                                // this.$router.push('/personnel-manage')
                            }
                        })
                    } else {
                        this.$message.error(res.message)
                    }
                }
            })
        },
        async getCode () {
            const res = await this.$ApiServer['login/wechat/code']({
                mobile: this.form.account,
                state: this.$route.query.state
            })
            if (res.code === 200) {
                this.$message.success('发送成功')
                this.second = 60
                this.timer = setInterval(() => {
                    if (this.second) {
                        this.second--
                    } else {
                        clearInterval(this.timer)
                    }
                }, 1000)
            } else {
                this.$message.error(res.message)
            }
        },
        toLogin () {
            this.$router.push('/auth/login')
        }
    }
}
</script>

<style lang='less' scoped src='./index.less'></style>
<style lang='less' scoped>
.login-container {
    .right-opera {
        .title {
            font-size: .24rem;
            font-weight: bold;
            font-family: "PingFang SC";
            line-height: .25rem;
            color: #333333;
            position: relative;
            text-align: center;
            &:after {
                content: "";
                width: .42rem;
                height: .03rem;
                background: #009944;
                position: absolute;
                bottom: -0.07rem;
                left: calc(50% - .21rem);
            }
        }
        .login-form {
            margin-top: .53rem;
            ::v-deep {
                .password {
                    .ant-input {
                        padding-left: .26rem;
                    }
                }
            }
            .check-privacy {
                font-size: .14rem;
                color: #666666;
                padding-left: .14rem;
                button {
                    padding: 0;
                  font-size: .14rem;
                    color: #009944;
                    line-height: .2rem;
                    height: .2rem;
                    border: 0;
                }
            }
            .login-btn-item {
                margin-bottom: .18rem;
            }
            .login-btn {
                margin-top: 1.75rem;
            }
            .hasAccount {
                color: #666666;
                text-align: center;
                button {
                    padding: 0;
                    color: #009944;
                    line-height: .2rem;
                    height: .2rem;
                    border: 0;
                }
            }
        }
    }
}

::v-deep .has-error{
  .ant-form-explain{
    font-size: .14rem;
  }
}
</style>
